<template>
  <div>
    <el-form ref="form" :model="population" label-width="80px" style="padding-top: 50px">
      <el-form-item>
        姓名：<el-input v-model="population.name" style="width: 300px;padding-right: 50px" placeholder="请输入姓名" ></el-input>
        证件号码：<el-input v-model="population.idNumber" style="width: 300px;padding-right: 50px" placeholder="请输入证件号码" ></el-input>
        手机号：<el-input v-model="population.phone" style="width: 300px" placeholder="请数据手机号"></el-input>
      </el-form-item>
      <el-form-item>
        类型：<el-select v-model="population.type" style="padding-right: 50px" placeholder="请选择类型" clearable>
        <el-option v-for="item in dict.type.sys_popu_type" :label="item.label" :value="item.value" :key="item.value"></el-option>
      </el-select>
        性别：<el-select v-model="population.sex" style="padding-right: 50px" placeholder="请选择性别" clearable>
        <el-option v-for="item in dict.type.sys_popu_sex" :label="item.label" :value="item.value" :key="item.value"></el-option>
      </el-select>
        迁移状态：<el-select v-model="population.transfer" style="padding-right: 50px" placeholder="请选择迁移状态" clearable>
        <el-option v-for="item in dict.type.sys_popu_transfer" :label="item.label" :value="item.value" :key="item.value"></el-option>
      </el-select>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
        <el-button @click="cancel" >取消</el-button>
        <el-button icon="el-icon-plus" size="small" @click="add">新增人口</el-button>
      </el-form-item>
    </el-form>

    <el-col :span="1.5" style="float: right;padding-right: 50px">
      <el-button type="warning" plain icon="el-icon-download" size="mini" @click="exportExcel">导出</el-button>
    </el-col>

    <el-col :span="1.5" style="float: right;padding-right: 20px" >
      <el-upload class="upload-demo"
        action="/dev-api/base-sixreal/population/import"
        :show-file-list="false"
        :on-success="importSuccess"
        :on-error="importError"
      >
        <el-button type="primary" style="padding-right: 20px" icon="el-icon-upload2" size="mini">导入</el-button>
      </el-upload>
    </el-col>

    <!-- 不需要直接显示整个数组，因为我们将逐个显示其元素 -->
    <div v-for="item in arr" style="float: left; margin-left: 80px; margin-top: 50px; display: flex;">
      <el-card style="max-width: 480px; display: flex;">
        <div style="flex: 1; display: flex;">
          <!-- 图片显示在左边 -->
          <img :src="item.pic" alt="" style="width: 100px; height: 100px; margin-right: 20px;">
          <!-- 数据显示在右边 -->
          <div style="flex: 1; display: flex; flex-wrap: wrap; align-content: flex-start;">
            <!-- 姓名独占一行，加粗加大 -->
            <div style="width: 100%; font-weight: bold; font-size: 1.2em;">
              <p class="text item">{{ item.name }}</p>
            </div>
            <!-- 剩余字段两个两个排列 -->
            <div style="width: 50%;">
              <p class="text item">性别: {{ item.sex === 0 ? '男' : '女' }}</p>
            </div>
            <div style="width: 50%;">
              <p class="text item">电话: {{ item.phone }}</p>
            </div>
            <div style="width: 100%;">
              类型：<dict-tag :options="dict.type.sys_popu_type" style="float: right;padding-right: 200px" :value="item.type"></dict-tag>
            </div>
            <div style="width: 50%;">
              <p class="text item">小区名称: {{ item.plotName }}</p>
            </div>
            <div style="width: 50%;">
              <p class="text item">楼栋名称: {{ item.buildingName }}</p>
            </div>
            <div style="width: 50%;">
              <p class="text item">单元名称: {{ item.apartmentName }}</p>
            </div>
            <div style="width: 50%;">
              <p class="text item">房间名称: {{ item.tenementName }}</p>
            </div>
            <div style="width: 100%;">
              <p class="text item">身份证号码: {{ item.idNumber }}</p>
            </div>
            <div style="width: 100%;">
              <p class="text item">民族: {{ item.nationName }}</p>
            </div>
            <div style="width: 100%;">
              <p class="text item">身份标签: {{ item.populationTagName }}</p>
            </div>
            <!-- 如果需要显示更多信息，可以继续添加 -->
          </div>
        </div>
        <template #footer>Footer content</template>
      </el-card>
    </div>
    <el-table :data="arr" style="width: 100%">
      <el-table-column label="图片" width="300">
        <template slot-scope="scope">
          <img :src="scope.row.pic" alt="图片损坏">
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="120">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="性别" width="100">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_popu_sex" :value="scope.row.sex"></dict-tag>
        </template>
      </el-table-column>
      <el-table-column label="最后出现" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.lastTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="民族" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.nationName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="电话" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{scope.row.phone}}</span>
        </template>
      </el-table-column>
      <el-table-column label="小区" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.plotName }}{{scope.row.buildingName}}{{scope.row.apartmentName}}{{scope.row.roomName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="证件号码" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.idNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column label="户籍地址" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.domicileAddress }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="transfer(scope.row)">迁移</el-button>
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

<!--                            添加/编辑                           -->
    <el-dialog :title="this.bb" :visible.sync="dialogFormVisible">
      <el-form :model="populations">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="populations.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
            <el-input v-model="populations.sex"></el-input>
        </el-form-item>
        <el-form-item label="民族" :label-width="formLabelWidth">
          <el-select v-model="populations.nationId" placeholder="请选择民族">
            <el-option v-for="item in nation" :label="item.name" :value="item.id" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth">
          <el-input v-model="populations.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="证件号码" :label-width="formLabelWidth">
          <el-input v-model="populations.idNumber" autocomplete="off"  @blur="Idnumber(populations.idNumber)"></el-input>
        </el-form-item>
        <el-form-item label="小区" :label-width="formLabelWidth">
          <el-select v-model="populations.plotId" placeholder="请选择小区" @change="handleChange" >
            <el-option v-for="item in plot" :label="item.name" :value="item.id" :key="item.id" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="具体住址" :label-width="formLabelWidth">
          <el-select v-model="populations.building" placeholder="请选择楼栋" @change="handleChangeBuild">
            <el-option v-for="item in building" :label="item.name" :value="item.id" :key="item.id"></el-option>
          </el-select>
          <el-select v-model="populations.apartment" placeholder="请选择单元" @change="handleChangeCell"  >
            <el-option v-for="item in cell"
                       :label="item.name"
                       :value="item.id"
                       :key="item.id" ></el-option>
          </el-select>
          <el-select v-model="populations.tenementId" placeholder="请选择房间号"  >
            <el-option v-for="item in room" :label="item.name" :value="item.id" :key="item.id" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="户籍地址" :label-width="formLabelWidth">
          <el-input v-model="populations.domicileAddress" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="出生日期" :label-width="formLabelWidth">
          <el-date-picker v-model="populations.birthday" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="身份标签">
          <el-checkbox v-model="populations.populationTagId" @change="handleCheckedTreeNodeAll1('menu')">全选/全不选</el-checkbox>
        <br>
        <div class="tree-border">
          <el-checkbox v-for="item in tags" :key="item.id" :label="item.name" v-model="item.checked" style="left: 10px" @change="handleSingleCheckboxChange(item)">{{ item.name }}</el-checkbox>
        </div>
        </el-form-item>
        <el-form-item label="人脸图片" :label-width="formLabelWidth">
          <el-upload
            action="/prod-api/base-sixreal/population/upload"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :before-remove="beforeRemove"
            :on-success="handleSuccess"
          >

            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibless = false">取 消</el-button>
        <el-button type="primary" @click="addPopulation">确 定</el-button>
      </div>
    </el-dialog>


<!--                                  迁移                                       -->
    <el-dialog title="迁移" :visible.sync="dialogFormVisibles">
      <el-form :model="person">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="person.name" autocomplete="off" readonly></el-input>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth">
          <el-input v-model="person.phone" autocomplete="off" readonly></el-input>
        </el-form-item>
        <el-form-item label="证件号码" :label-width="formLabelWidth">
          <el-input v-model="person.idNumber" autocomplete="off" readonly></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-select v-model="person.sex" placeholder="请选择性别" disabled>
            <el-option v-for="item in dict.type.sys_popu_sex" :label="item.label" :value="item.value" :key="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="现居住行政区划" :label-width="formLabelWidth" >
          <el-select v-model="person.olddivisionId" placeholder="请选择行政区域" @change="handleChangeDivision" disabled>
            <el-option v-for="item in division" :label="item.name" :value="item.id" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
<!--        <el-form-item label="活动区域" :label-width="formLabelWidth">-->
<!--          <el-select v-model="person.region" placeholder="请选择活动区域">-->
<!--            <el-option label="区域一" value="shanghai"></el-option>-->
<!--            <el-option label="区域二" value="beijing"></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
        <el-form-item label="现居住小区" :label-width="formLabelWidth">
          <el-select v-model="person.oldplotId" placeholder="请选择小区" @change="handleChange1" disabled>
            <el-option v-for="item in plot" :label="item.name" :value="item.id" :key="item.id" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="现居住具体住址" :label-width="formLabelWidth">
          <el-select v-model="person.oldbuilding" placeholder="请选择楼栋" @change="handleChangeBuild1" disabled>
            <el-option v-for="item in building" :label="item.name" :value="item.id" :key="item.id"></el-option>
          </el-select>
          <el-select  v-model="person.oldapartment" placeholder="请选择单元" @change="handleChangeCell1" disabled >
            <el-option v-for="item in cell" :label="item.name" :value="item.id" :key="item.id" ></el-option>
          </el-select>
          <el-select v-model="person.oldtenementId" placeholder="请选择房间号" disabled >
            <el-option v-for="item in room" :label="item.name" :value="item.id" :key="item.id" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="新居住行政区划" :label-width="formLabelWidth" >
          <el-select v-model="person.divisionId" placeholder="请选择行政区域" @change="handleChangeDivision" >
            <el-option v-for="item in division" :label="item.name" :value="item.id" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="新居住小区" :label-width="formLabelWidth">
          <el-select v-model="person.plotId" placeholder="请选择小区" @change="handleChange1" >
            <el-option v-for="item in plot" :label="item.name" :value="item.id" :key="item.id" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="新居住具体住址" :label-width="formLabelWidth">
          <el-select v-model="person.building" placeholder="请选择楼栋" @change="handleChangeBuild1" >
            <el-option v-for="item in building" :label="item.name" :value="item.id" :key="item.id"></el-option>
          </el-select>
          <el-select  v-model="person.apartment" placeholder="请选择单元" @change="handleChangeCell1"  >
            <el-option v-for="item in cell" :label="item.name" :value="item.id" :key="item.id" ></el-option>
          </el-select>
          <el-select v-model="person.tenementId" placeholder="请选择房间号" >
            <el-option v-for="item in room" :label="item.name" :value="item.id" :key="item.id" ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dotransfer">确定迁移</el-button>
      </div>
    </el-dialog>


    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="this.population.pageNum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="this.population.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="this.population.total">
    </el-pagination>

  </div>
</template>

<script>
import { list, nationList, plotList , add, update, del,findByDivisionId,dotransfer,findTagList } from "@/api/community/population";
import { findById, findByPlotId } from "@/api/community/tenement";
import {divisionList} from "@/api/community/plot";
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
export default {
  dicts: ['sys_popu_sex','sys_popu_type','sys_popu_transfer'],
  //import引入的组件需要注入到对象中才能使用"
  components: {},
  props: {},
  data() {
    //这里存放数据"

    return {
      isAllChecked:false,
      arr:[],
      population:{
        pageNum:1,
        pageSize:5,
        total:1
      },
      aa:0,
      dialogFormVisible:false,
      formLabelWidth: '120px',
      populations:{
        populationTagId:'',
        sex:'',
        birthday:'',
        pic:''
      },
      dialogImageUrl: '',
      dialogVisible: false,
      bb:"新增人口",
      plot:[],
      nation:[],
      building:[],
      cell:[],
      room:[],
      cc:1,
      popu:{},
      person:{},
      dialogFormVisibles:false,
      dialogFormVisibless:false,
      division:[],
      tags:[],
      checkAll: false,
      isIndeterminate: true,
      checkedTags: [],
    };
  },
  //计算属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    //身份证号离焦事件
    Idnumber(idNumber){
      // 出生日期计算
      const year = idNumber.substr(6, 4);
      const month = idNumber.substr(10, 2);
      const day = idNumber.substr(12, 2);
      const sex = parseInt(idNumber.substr(16, 1), 10) % 2 === 0 ? '女' : '男';
      this.populations.birthday = `${year}-${month}-${day}`;
      this.populations.sex = sex; // 赋值给 populations.sex
    },

       // 全选/全不选
    handleCheckedTreeNodeAll1(type) {
      // // 根据isAllChecked的值来更新menuOptions中每个item的checked状态
      // this.tags.forEach(item => {
      //   item.checked = this.isAllChecked;
      // });
      // this.populations.populationTagId = this.tags.filter(item => item.checked).map(item => item.id)
      // console.log(this.populations.populationTagId)
      const isChecked = !this.isAllChecked;
      this.tags.forEach(item => (item.checked = isChecked));
      this.isAllChecked = isChecked;
      this.populations.populationTagId = this.tags.filter(item => item.checked).map(item => item.id);
      console.log(this.populations.populationTagId);
    },
    // 选中的复选框发生变化
    handleSingleCheckboxChange(item) {
      this.populations.populationTagId = this.tags.filter(item => item.checked).map(item => item.id)
      this.isAllChecked = this.tags.every(option => option.checked);
    },
    findTagList(){
      findTagList().then(
        res => {
          this.tags=res.data
        }
      )
    },
    dotransfer(){
      dotransfer(this.person).then(
        res => {
          this.$message.success(res.msg)
          this.dialogFormVisibles=false
          this.list()
        }
      )
    },
    divisionList(){
      divisionList().then(
        res => {
          this.division=res.data
        }
      )
    },
    transfer(person){
      this.person=person
      this.person.olddivisionId=person.divisionId
      this.person.oldplotId=person.plotId
      this.person.oldbuilding=person.building
      this.person.oldapartment=person.apartment
      this.person.oldtenementId=person.tenementId
      this.person.sex=String(person.sex)
      this.divisionList()
      this.handleChangeDivision(this.person.divisionId)
      this.handleChange1(this.person.plotId)
      this.handleChangeBuild1(this.person.building)
      this.handleChangeCell1(this.person.apartment)
      this.dialogFormVisibles=true
    },
    cancel(){
      this.population={
        pageNum:1,
        pageSize:3,
        total:1
      }
      this.list()
    },
    importSuccess(response, file) {
      alert("导入成功");
    },
    importError(error, file) {
      alert("导入失败");
    },
    handleSuccess(response,file,fileList){
      this.populations.pic=response.data
    },
    exportExcel() {
      this.download('/base-sixreal/population/export',{
        ...this.queryParams
      }, `spu_${new Date().getTime()}.xlsx`)
    },
    beforeRemove(file, fileList) {
      return true;
    },
    handlePictureCardPreview(file) {
      // this.dialogImageUrl = file.url;
      // this.dialogVisible = true;
    },
    onSubmit(){
      this.list()
    },
    handleDelete(populations){
      del(populations.id).then(
        res => {
          this.$message.success(res.msg)
          this.list()
        }
      )
    },
    handleEdit(populations){
      this.populations=populations
      this.populations.sex=String(populations.sex)
      const tagIds = this.populations.populationTagIds.split(',').map(id => parseInt(id, 10));
      this.tags.forEach(tag => {
        tag.checked = tagIds.includes(tag.id);
      });
      this.populations.populationTagId = this.tags.filter(item => item.checked).map(item => item.id)
      this.isAllChecked = this.tags.every(option => option.checked);
      console.log(this.populations.populationTagId);
      this.handleChange()
      this.handleChangeBuild(this.populations.building)
      this.handleChangeCell(this.populations.apartment)
      this.bb="修改人口信息"
      this.dialogFormVisible=true
      this.cc=2
    },
    addPopulation(){

      if(this.populations.sex=='男'){
        this.populations.sex=1
      }
      if(this.populations.sex=='女'){
        this.populations.sex=2
      }
      if(this.cc==1){
        console.log(this.populations)
        add(this.populations).then(
          res => {
            this.$message.success(res.msg)
            this.dialogFormVisible=false
            this.list()
          }
        )
      } else if(this.cc==2){
        update(this.populations).then(
          res => {
            this.$message.success(res.msg)
            this.dialogFormVisible=false
            this.list()
          }
        )
      }
    },
    plotList(){
      plotList().then(
        res => {
          this.plot=res.data
        }
      )
    },
    handleChange(){
      findByPlotId(this.populations.plotId).then(
        res => {
          this.building=res.data
        },
      )
    },
    handleChangeBuild(){
      findById(this.populations.building).then(
        res => {
          this.cell=res.data
        }
      )
    },
    handleChangeCell(){
      findById(this.populations.apartment).then(
        res => {
          this.room=res.data
        }
      )
    },
    handleChangeDivision(){
      findByDivisionId(this.person.divisionId).then(
        res => {
          this.plot=res.data
        }
      )
    },
    handleChange1(){
      findByPlotId(this.person.plotId).then(
        res => {
          this.building=res.data
        },
      )
    },
    handleChangeBuild1(){
      findById(this.person.building).then(
        res => {
          this.cell=res.data
        }
      )
    },
    handleChangeCell1(){
      findById(this.person.apartment).then(
        res => {
          this.room=res.data
        }
      )
    },
    add(){
      this.fileList = [];
      this.beforeRemove()
      this.populations={}
      this.dialogFormVisible=true
    },
    handleSizeChange(val) {
      this.population.pageSize=val
      this.list()
    },
    handleCurrentChange(val) {
      this.population.pageNum=val
      this.list()
    },
    list(){
      list(this.population).then(
        res => {
          console.log(res.data.list)
          this.population.total=res.data.total
          this.arr=res.data.list
        }
      )
    },
    nationList(){
      nationList().then(
        res => {
          this.nation=res.data
        }
      )
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）",
  created() {
    this.list()
    this.nationList()
    this.plotList()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {
    this.findTagList()
  },
  beforeCreate() {
  }, //生命周期 - 创建之前",
  beforeMount() {
  }, //生命周期 - 挂载之前",
  beforeUpdate() {
  }, //生命周期 - 更新之前",
  updated() {
  }, //生命周期 - 更新之后",
  beforeDestroy() {
  }, //生命周期 - 销毁之前",
  destroyed() {
  }, //生命周期 - 销毁完成",
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发",
};
</script>
<style scoped>

</style>


